<template>
     <div id="app">
        <el-tree-select @removeTag="changeMyValue"  :styles="styles" v-model="values"  @check="_selectChange" :selectParams="selectParams" :treeParams="treeParams" :treeRenderFun="_renderFun" ref="treeSelect"/>
        
    </div>
</template>
<script>
export default {
    name: 'App', 
    props:['value'],
    data() {
        return {
            styles: {
                width: '300px'
            },
            test: '',
            values: [],
            selectParams: {
                multiple: true,
                clickParent:true,
                placeholder: '请输入内容'
            },
            treeParams: {
                clickParent: true,
                //filterable: true,
                'check-strictly': false,
                'default-expand-all': true,
                'expand-on-click-node': false,
                data: [],
                props: {
                    children: 'child',
                    label: 'label',
                    disabled: 'disabled',
                    value: 'label'
                }
            }
        };
    },
    mounted() {
        //
        
        this.values = this.value.split(",")
        
        this.treeParams.data = this.$attrs.userData;
        this.$refs.treeSelect.treeDataUpdateFun(this.$attrs.userData);
    },
    watch:{
        values(val){
            var j=2;
            var s = this.$refs.treeSelect.ids.join(",");
            if(s !== ""){
                this.$emit('input',this.$refs.treeSelect.ids.join(","))
                console.log("change values "+this.$refs.treeSelect.ids.join(","));
            }
        }
    },
    methods: {
        // 树点击

      changeMyValue(){
          
           var s = this.values;
            
            this.$emit('input',this.$refs.treeSelect.ids.join(","))
      },
        _selectChange(val,node) {
            var s = this.values;
            console.log("_selectChange")
            //this.$emit('input',this.$refs.treeSelect.ids.join(","))
            //this.$root.eventHub.$emit("updateRight",this.$refs.treeSelect.ids.join(","))
           //
           
            //
        },
        // 自定义render
        _renderFun(h, { node, data, store }) {
            return (
                <span class='custom-tree-node'>
                    <span>{node.label}</span>
                </span>
            );
        }
    },
    components: { }
};
</script>